import { useModel } from "umi";
import { useReactive } from "ahooks";
import { useEffect } from "react";
import { Space, Table, Card, Popconfirm, Divider } from "antd";
import { Button } from "@douyinfe/semi-ui";

import { GetAllIndustryTypes, DeleteIndustryType } from "../../_graphql/organizations";

import SettingIndustryType from "./setting.industry.type";
import EditIndustryType from "./edit.industry.type";

const IndustryTypeList = () => {
    const { graphqlFetchPlatform } = useModel("global");
    const { setModalVisible, setModalTitle, setModalWidth, setModalComponent } = useModel("global.modal");
    const { currentOrganizationUuid } = useModel("organization.info");

    const state = useReactive({
        loading: false,
        submitLoading: false,
        data: [],
    });

    const loadDate = async () => {
        state.loading = true;
        let res = await graphqlFetchPlatform({ query: GetAllIndustryTypes, variables: { oiUuid: currentOrganizationUuid } });
        state.data = res?.a?.nodes || [];
        state.loading = false;
    };

    useEffect(() => {
        currentOrganizationUuid && loadDate();
    }, [currentOrganizationUuid]);

    const openSetIndustryTypeModal = (type) => {
        setModalTitle("添加组织行业类型");
        setModalWidth(500);
        setModalComponent(<SettingIndustryType reloadData={loadDate} industryTypes={state.data} />);
        setModalVisible(true);
    };

    const openEditIndustryTypeModal = (record) => {
        setModalTitle("编辑组织行业类型");
        setModalWidth(500);
        setModalComponent(<EditIndustryType record={record} reloadData={loadDate} />);
        setModalVisible(true);
    };

    const deleteData = async (record) => {
        state.submitLoading = true;
        let res = await graphqlFetchPlatform({ query: DeleteIndustryType, variables: { oiUuid: currentOrganizationUuid, itUuid: record.itUuid } });
        if (res) {
            loadDate();
        }
        state.submitLoading = false;
    };

    return (
        <Card title="适用行业" bodyStyle={{ padding: 0 }} extra={<Space>{currentOrganizationUuid && <Button onClick={openSetIndustryTypeModal}>添加行业类型</Button>}</Space>}>
            <Table loading={state.loading} dataSource={state.data} size="small" bordered={false} pagination={false} rowKey="itUuid">
                <Table.Column title="序号" align="center" width={60} render={(_, r, i) => i + 1} />
                <Table.Column
                    title="行业名称"
                    dataIndex="b.itName"
                    align="left"
                    render={(_, r, i) => (
                        <div>
                            {r.b.itName} ({r.itDbna})<div>{r.itRedb}</div>
                        </div>
                    )}
                />
                <Table.Column
                    title="操作"
                    align="center"
                    width={120}
                    render={(_, r) => (
                        <Space size={0} split={<Divider type="vertical" />}>
                            <a onClick={() => openEditIndustryTypeModal(r)}>编辑</a>
                            <Popconfirm title="确认要移除该行业类型吗?" okButtonProps={{ loading: state.submitLoading }} placement="topRight" onConfirm={() => deleteData(r)}>
                                <a>移除</a>
                            </Popconfirm>
                        </Space>
                    )}
                />
            </Table>
        </Card>
    );
};

export default IndustryTypeList;
